<template>
    <scroll-view scroll-y="false">
        <view style="height: 20rpx"></view>
        <view class="info">
            <view class="company-box" @click="selectRegion">
                <text class="company-label">地区</text>
                <view class="first-box" style="flex: 1">
                    <view class="choice-menu">
                        <input class="choice-input" placeholder="请选择地区" disabled="true" v-model="regionName" />
                        <uni-icons type="arrowright" size="40"></uni-icons>
                    </view>
                </view>
            </view>
            <template-info
                ref="child"
                :freeShippingList="freeShippingList"
                :chargingList="chargingList"
                :model="model"
                class="template-info"></template-info>
        </view>
    </scroll-view>
</template>

<script>
import freightHead from "@/pages_supplier/components/freightTemplate/freight-head.vue"
import choiceMenu from "@/pages_supplier/components/freightTemplate/choice-menu.vue"
import templateInfo from "@/pages_supplier/components/freightTemplate/template-info.vue"

import appMixin from "@/utils/appMixin.js"
import { GetPostageAreaInfo, SavePostageTemplate, SavePostageArea } from "@/pages_supplier/service/api/postage.js"
import { GetExpressList } from "@/pages_supplier/service/api/exChange.js"
export default {
    data() {
        return {
            freeShippingList: ["不包邮", "按件包邮", "按金额包邮", "按重量包邮", "全场包邮"],
            chargingList: ["计件", "计重", "计体积"],
            model: 0,
            id: 0,
            areaID: 0,
            expressList: [],
            infoList: [],
            express: {},
            regionData: [],
            regionIds: [],
            regionName: "",
        }
    },
    components: {
        freightHead,
        choiceMenu,
        templateInfo,
    },
    computed: {},
    methods: {
        selectRegion() {
            uni.navigateTo({
                url: "/pages/select/select-area?regionData=" + JSON.stringify(this.regionIds),
                events: {
                    getSelectData: (data) => {
                        if (data) {
                            this.regionName = ""
                            this.regionIds = []
                            console.log(data)
                            data.data.forEach((e) => {
                                this.regionName += e.Name + "、"
                                this.regionIds.push(e.ID)
                            })
                        }
                    },
                },
            })
        },
        GetPostageAreaInfo(data) {
            GetPostageAreaInfo(data).then((res) => {
                if (res.State == 1 && res.Data) {
                    this.$refs.child.load(res.Data)
                    this.infoList = res.Data
                    res.Data.AreaList.forEach((e) => {
                        if (e.CityName) {
                            this.regionName += e.ProvinceName + "-" + e.CityName + "、"
                        } else {
                            this.regionName += e.ProvinceName + "、"
                        }
                    })
                    this.regionIds = res.Data.RegionIds
                } else {
                    uni.showToast({
                        title: res.Msg,
                        icon: "error",
                    })
                }
            })
        },
        onNavigationBarButtonTap(e) {
            let param = this.$refs.child.uploadInfo()
            param.postageTemplateId = this.id
            param.regionIds = this.regionIds
            SavePostageArea(param).then((res) => {
                if (res.State == 1) {
                    this.easyGoBack(1)
                    this.$forceUpdate()
                } else {
                    uni.showToast({
                        title: res.Msg,
                        icon: "error",
                    })
                }
            })
        },
    },
    onReady() {},
    onLoad(data) {
        this.id = data.id //运费模板ID
        this.model = data.type
        this.areaID = data.areaID //特殊地区ID
        if (data.areaID > 0) {
            this.GetPostageAreaInfo({ postageTemplateId: this.id, id: this.areaID })
        }
    },
}
</script>
<style lang="scss">
.info {
    background-color: $color-white;
    padding-top: 20rpx;
}

.special-area-label {
    text-align: center;
    padding: 20rpx 0;
}

.special-area-box {
    background-color: $color-white;
    margin-top: 20rpx;
    display: flex;
    justify-content: space-between;
    padding: 0 20rpx;
}

%left-style {
    font-size: 30rpx;
    padding: 16rpx 0;
    margin-bottom: 32rpx;
    width: 150rpx;
    margin-left: 30rpx;
}

.company-label {
    @extend %left-style;
}

.title-label {
    @extend %left-style;
}

%box {
    display: flex;
}

.company-box {
    @extend %box;
}

.title-box {
    @extend %box;
}

%right-style {
    font-size: 30rpx;
    background-color: $app-color-input-bg;
    padding: 16rpx 0 16rpx 20rpx;
    margin-right: 30rpx;
    margin-bottom: 30rpx;
    display: flex;
    margin-left: 20rpx;
}

.title-input {
    flex: 1;
    @extend %right-style;
}
.choice-menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 16rpx;
    margin-left: 20rpx;

    margin-right: 30rpx;
    flex: 1;
    background-color: #f5f5f5;
}

.choice-input {
    font-size: 30rpx;
    margin: 16rpx 0 16rpx 20rpx;
    display: flex;
    flex: 1;
}
</style>
